ant.design form表单提交+表单赋值

您所在的位置：网站首页 › react 表单提交 › ant.design form表单提交+表单赋值

ant.design form表单提交+表单赋值

2023-07-17 22:20| 来源: 网络整理| 查看: 265

场景：index.js上有三个form表单组件分别是，A.js B.js C.js

点击index.js上的提交/保存按钮，提交子组件form表单的值

1.在index父组件上使用create创建form

const { form } = this.props; const { getFieldDecorator } = this.props.form; Form.create()(BilltoMaintenanceDetail);

2.把form和getFieldDecorator 当做参数传递给子组件，A.js/B.js/C.js

3.子组件接受到之后,就可以使用表单的form相关方法了，此时已经和index创建的form关联起来了

const {form,getFieldDecorator} = this.props; {getFieldDecorator('Con_Cate',{ rules: [{required: true, message: '采购备注'}], })( )}

4.直接在父组件index.js提交就能获取到子组件表单的值

handleSubmit = (e) => { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { console.log('Received values of form: ', values); } }); } 表单赋值回显

在index.js父组件调用setFieldsValue,这里需要注意 setFieldsValue方法里面是个对象，以key:value的形式赋值,在这里可以直接给子组件里面的某一个表单元素赋值，代码如下

this.props.form.setFieldsValue({ Con_Cate:xxxx })

结束

【本文地址】

ant.design form表单提交+表单赋值

ant.design form表单提交+表单赋值

今日新闻

推荐新闻